<!-- 日志模块 -->
<script setup lang="ts">
import { reactive, ref } from 'vue';
const pageData = reactive({
  loglist: [
    {
      version: 'V1.0.2',
      time: '2024/11/15',
      logDetail: [
        {
          label: '添加目录中文件搜索功能',
          status: 1,
        },
        {
          label: '添加回答出处功能，默认隐藏，点击显示',
          status: 1,
        },
        {
          label: '查看用户评论功能',
          status: 1,
        },
        {
          label: '查看版本记录功能',
          status: 1,
        },
        {
          label: '添加用户功能',
          status: 0,
        },
        {
          label: '添加session功能',
          status: 0,
        },
      ],
    },
    {
      version: 'V1.0.1',
      time: '2024/11/07',
      logDetail: [
        {
          label: '添加用户评论',
          status: 1,
        },
        {
          label: '二级目录多选',
          status: 1,
        },
        {
          label: '修复sqlite中评论时间不正确',
          status: 1,
        },
      ],
    },
  ],
});
</script>

<template>
  <div class="mainStyle">
    <div class="contentRight columnFlex">
      <el-timeline>
        <el-timeline-item
          :key="'版本' + item.version"
          :timestamp="item.time"
          placement="top"
          v-for="item in pageData.loglist"
        >
          <el-card>
            <h4>版本号：{{ item.version }}</h4>
            <p v-for="(log, index) in item.logDetail" :key="'内容' + log.label">
              {{ index + 1 }}.{{ log.label }}
              <el-tag class="work-status" size="small" v-if="log.status">已完成</el-tag>
              <el-tag class="work-status" type="warning" size="small" v-if="!log.status"
                >未完成</el-tag
              >
            </p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.contentRight {
  color: #fff;
}
//  样式穿透
.el-timeline-item__timestamp {
  color: #fff;
}
.work-status {
  margin-left: 10px;
}
h4 {
  color: #fff;
}
</style>
<style>
.columnFlex .el-timeline-item__timestamp {
  color: #fff;
}
.columnFlex .el-card {
  color: #98bfd1;
  background-color: #0b255c !important;
  padding: 10px;
  border-radius: 4px;
}
.columnFlex .el-timeline-item__tail {
  border-left: 2px solid #3e6bc5;
}
.columnFlex .el-timeline-item__node {
  background-color: #3e6bc5;
}
</style>
